<template>
    <view class="text_block">
        <view style="width:50%" v-for="(item,index) in content" @click="blockClick">
            <!-- :class="[(index+1)%3==0 ? '':'marginRight','kind','kind_one','breathe-blue']" -->
            <view v-if="item.kind == 1" :key="index"
                :style="{backgroundImage:'linear-gradient(to top right,'+item.background[0]+','+item.background[1]+')',width:(100/content.length-3)+'%'}"
                class="kind_one p-20 ">
                <view class="view_100" :style="{fontSize:item.content[0].size,color:item.content[0].colorvalue}">
                    {{item.content[0].value}}</view>
                <view class="view_100" :style="{fontSize:item.content[1].size,color:item.content[1].colortext}">
                    {{item.content[1].text}}</view>
            </view>
            <view v-else-if="item.kind == 2" :key="index"
                :class="[(index+1)%3==0 ? '':'marginRight','kind','kind_two','breathe-blue']"
                :style="{backgroundImage:'linear-gradient(to top right,'+item.background[0]+','+item.background+')' ,marginRight:(index+1)%3==0?'0rpx':'40rpx'}">
                <view v-for="(content,i) in item.content" :key="i" class="two_1">
                    <text :style="{fontSize:content.size,color:content.colortext}">{{content.text}}:</text>
                    <text :style="{fontSize:content.size,color:content.colorvalue}">{{content.value}}</text>
                </view>
            </view>
            <view v-else-if="item.kind == 3" :key="index" class="kind kind_three breathe-blue"
                :style="{backgroundImage:'linear-gradient(to top right,'+item.background[0]+','+item.background+')'}">
                <view class="view_100" :style="{fontSize:item.content[0].size,color:item.content[0].colorvalue}">
                    {{item.content[0].value}}</view>
                <view class="view_100" :style="{fontSize:item.content[1].size,color:item.content[1].colortext}">
                    {{item.content[1].text}}</view>
                <view class="three_3 view_100">
                    <view v-for="(j,i) in 2" :key="i">
                        <text
                            :style="{fontSize:item.content[i+2].size,color:item.content[i+2].colortext}">{{item.content[i+2].text}}:</text>
                        <text
                            :style="{fontSize:item.content[i+2].size,color:item.content[i+2].colorvalue}">{{item.content[i+2].value}}</text>
                    </view>
                </view>
            </view>
            <!--       class="[(index+1)%3==0 ? '':'marginRight','kind','kind_four','breathe-blue']" -->
            <view class="kind_four p-20" v-else-if="item.kind == 4" :key="index"
                :style="{backgroundImage:'linear-gradient(to top right,'+item.background[0]+','+item.background[1]+')'}">
                <view class="view_100" :style="{fontSize:item.content[0].size,color:item.content[0].colortext}">
                    {{item.content[0].text}}</view>
                <view class="view_100" :style="{fontSize:item.content[1].size,color:item.content[1].colorvalue}">
                    {{item.content[1].value}}</view>
                <view class="four_3" :style="{fontSize:item.content[2].size,color:item.content[2].colorvalue}">
                    <text
                        :style="{fontSize:item.content[3].size,color:item.content[3].colorvalue}">{{item.content[2].text}}</text>
                    <li v-if="item.content[3].text == 'up'" class="iconfont icon-up icon"
                        :style="{color:item.content[3].colortext}"></li>
                    <li v-else class="iconfont icon-down icon" :style="{color:item.content[3].colortext}"></li>
                    <text
                        :style="{fontSize:item.content[3].size,color:item.content[3].colorvalue}">{{item.content[3].value}}</text>
                </view>
            </view>
            <view v-else-if="item.kind == 5" :key="index"
                :class="[(index+1)%3==0 ? '':'marginRight','kind','kind_five','breathe-red']"
                :style="{backgroundImage:'linear-gradient(to top right,'+item.background[0]+','+item.background[1]+')',marginRight:(index+1)%3==0?'0rpx':'40rpx'}">
                <view class="view_100" :style="{fontSize:item.content[0].size,color:item.content[0].colortext}">
                    {{item.content[0].text}}</view>
                <view class="view_100" :style="{fontSize:item.content[1].size,color:item.content[1].colorvalue}">
                    {{item.content[1].value}}</view>
                <view class="five_3 view_100">
                    <view v-for="(j,i) in 2" :key="i">
                        <text
                            :style="{fontSize:item.content[j+2].size,color:item.content[j+2].colortext}">{{item.content[j+2].text}}</text>
                        <text
                            :style="{fontSize:item.content[j+2].size,color:item.content[j+2].colorvalue}">{{item.content[j+2].value}}</text>
                    </view>
                </view>
                <view class="five_4">
                    <text
                        :style="{fontSize:item.content[4].size,color:item.content[4].colortext}">{{item.content[4].text}}</text>
                    <text
                        :style="{fontSize:item.content[4].size,color:item.content[4].colorvalue}">{{item.content[4].value}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            content: {
                type: Array,
                default: []
            },
        },
        data() {
            return {}
        },
        methods: {
            blockClick(){
                console.log(11111);
            }
        },
        mounted() {
            uni.onWindowResize((res) => {
                console.log('变化后的窗口宽度=' + res.size.windowWidth)
                console.log('变化后的窗口高度=' + res.size.windowHeight)
            })
        }
    }
</script>

<style lang="scss">
    .text_block {
        display: flex;
        width: 100%;
        flex-wrap: wrap;

        .marginRight {
            margin-right: 36rpx !important;
        }

        .view_100 {
            width: 100%;
        }

        .CPT_DYBG {
            overflow: hidden;
            position: relative;
        }

        .kind {
            width: 24%;
            padding: 10rpx;
            margin-bottom: 40rpx;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            border-radius: 16rpx;
            margin-left: 16rpx;
            box-shadow: -4px 4px 4px #ccc;
            position: relative;
        }

        .kind_one {
            margin: 10rpx;
            border-radius: 10rpx;
            box-shadow: -4px 4px 4px #ccc;
        }

        .kind_two {
            border-radius: 10rpx;
        }

        .kind_three {
            border-radius: 16rpx;
            width: 300rpx;
            margin: 0 auto;

            .three_3 {
                display: flex;
                justify-content: space-around;
            }
        }

        .kind_four {
            width: 90%;
            margin: 10rpx;
            border-radius: 10rpx;
            box-shadow: -4px 4px 4px #ccc;

            .four_3 {
                display: flex;

                li {
                    list-style-type: none;
                }

                .icon {
                    margin-top: -8rpx;
                    transform: scale(0.8);
                }
            }
        }

        .kind_five {
            border-radius: 20rpx;

            .five_3 {
                view {
                    width: 100%;
                }
            }
        }
    }

    // .breathe-blue {
    // 	position:relative;
    // 	color:#fff;
    // 	text-align:center;
    // 	cursor:pointer;
    // 	box-shadow:0 1px 2px rgba(0,0,0,.3);
    // 	overflow:hidden;
    // 	-webkit-animation-timing-function:ease-in-out;
    // 	-webkit-animation-name:breatheblue;
    // 	-webkit-animation-duration:2000ms;
    // 	-webkit-animation-iteration-count:infinite;
    // 	-webkit-animation-direction:alternate;
    // }
    // @keyframes breatheblue {
    // 	0% {
    // 		opacity:.8;
    // 		box-shadow:0 1px 2px rgba(62,178,245,0.5);
    // 	}
    // 	100% {
    // 		opacity:1;
    // 		box-shadow:0 1px 30px rgba(147,116,247,0.6);
    // 	}
    // }
    // .breathe-red {
    // 	position:relative;
    // 	color:#fff;
    // 	text-align:center;
    // 	cursor:pointer;
    // 	box-shadow:0 1px 2px rgba(0,0,0,.3);
    // 	overflow:hidden;
    // 	-webkit-animation-timing-function:ease-in-out;
    // 	-webkit-animation-name:breathered;
    // 	-webkit-animation-duration:2000ms;
    // 	-webkit-animation-iteration-count:infinite;
    // 	-webkit-animation-direction:alternate;
    // }
    // @keyframes breathered {
    // 	0% {
    // 		opacity:.8;
    // 		box-shadow:0 1px 2px rgba(247,126,137,0.5);
    // 	}
    // 	100% {
    // 		opacity:1;
    // 		box-shadow:0 1px 30px rgba(247,149,59,0.9);
    // 	}
    // }
</style>
